<template>
  <el-dialog v-model=parentDialogFormVisible title="支付订单" @close="this.$emit('closeDialog')" width="20%">
    <span style="margin-right: 20px">支付方式：</span>
    <el-select v-model="payWay" placeholder="选择支付方式">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
    </el-select>
    <div style="width: 100%">
      <el-image
          v-for="item in options"
          :key="item"
          v-show="item.value === payWay"
          :src="require('@/assets/payQRCode/'+item.img)"
          fit="cover"
          style="margin:50px; width: 50%"
      >
        <template #error>
          <div class="image-slot">
            <el-icon><picture /></el-icon>
          </div>
        </template>
      </el-image>
    </div>
    <div style="text-align: right">
      <el-button type="danger" @click="closeDialog" style="margin-right: 20px">取消</el-button>
      <el-button type="success" @click="pay" style="margin-right: 20px">支付</el-button>
    </div>
  </el-dialog>
</template>

<script>
import request from "@/http/request";
export default {
  name: "PayBook",
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    bookID: {
      type: String,
      default: '',
    }
  },
  emits: ['closeDialog','payCancel','paySuccess'],
  watch: {
    dialogFormVisible: function(newVal){
      this.parentDialogFormVisible = newVal;
      if (newVal === true && !this.bookID) {
        this.$tipUtil.warningTip("支付订单号获取失败，为您跳转至主页！");
        this.$router.replace({
          path: '/',
        });
      }
    },
  },
  data() {
    return {
      parentDialogFormVisible: this.dialogFormVisible,
      payWay: '0',
    }
  },
  methods: {
    closeDialog() {
      this.payWay = '0';
      this.$emit('payCancel');
      this.$emit('closeDialog');
    },
    pay() {
      request({
        url: "/book/payment",
        method: 'post',
        data: {
          bookID: this.bookID,
        }
      }).then((response) => {
        if (response.code === 200) {
          this.$tipUtil.successTip(response.msg);
          this.$emit('paySuccess');
          this.$emit('closeDialog');
        } else {
          this.$tipUtil.errTip(response.msg);
        }
      })
    },
  },
  setup() {
    const options = [
      {
        value: '0',
        label: '支付宝',
        img: "zfb.png",
      },
      {
        value: '1',
        label: '微信支付',
        img: "wx.png",
      },
      {
        value: '2',
        label: '云闪付',
        img: "ysf.png",
      },
    ]
    return {
      options,
    }
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>